<template>
  <t-form
    ref="form"
    :data="formData"
    :rules="rules"
    :label-width="100"
    @submit="onSubmit"
  >
    <t-row :gutter="[16, 16]">
            <t-col :span="12">
        <t-form-item name="index" label="序号">
          <t-select
            v-model="formData.index"
            placeholder="请选择序号"
            clearable
          >
            <t-option :value="1" label="选项1" />
            <t-option :value="2" label="选项2" />
            <t-option :value="3" label="选项3" />
          </t-select>
        </t-form-item>
      </t-col>
      <t-col :span="12">
        <t-form-item name="no" label="合同编号">
          <t-input
            v-model="formData.no"
            placeholder="请输入合同编号"
            clearable
          />
        </t-form-item>
      </t-col>
      <t-col :span="12">
        <t-form-item name="name" label="合同名称">
          <t-input
            v-model="formData.name"
            placeholder="请输入合同名称"
            clearable
          />
        </t-form-item>
      </t-col>
      <t-col :span="12">
        <t-form-item name="status" label="状态：1-草稿，2-审核中，3-已生效，4-已完成，5-已终止">
          <t-input
            v-model="formData.status"
            placeholder="请输入状态：1-草稿，2-审核中，3-已生效，4-已完成，5-已终止"
            clearable
          />
        </t-form-item>
      </t-col>
      <t-col :span="12">
        <t-form-item name="paymentType" label="付款类型：1-一次性付款，2-分期付款，3-按进度付款">
          <t-input
            v-model="formData.paymentType"
            placeholder="请输入付款类型：1-一次性付款，2-分期付款，3-按进度付款"
            clearable
          />
        </t-form-item>
      </t-col>
      <t-col :span="12">
        <t-form-item name="contractType" label="合同类型：1-采购合同，2-销售合同，3-服务合同">
          <t-input
            v-model="formData.contractType"
            placeholder="请输入合同类型：1-采购合同，2-销售合同，3-服务合同"
            clearable
          />
        </t-form-item>
      </t-col>
      <t-col :span="12">
        <t-form-item name="amount" label="合同金额">
          <t-input-number
            v-model="formData.amount"
            placeholder="请输入合同金额"
            :min="0"
            :max="999999999"
            :step="1000"
          />
        </t-form-item>
      </t-col>
      <t-col :span="12">
        <t-form-item name="adminName" label="管理员姓名">
          <t-input
            v-model="formData.adminName"
            placeholder="请输入管理员姓名"
            clearable
          />
        </t-form-item>
      </t-col>
    </t-row>

    <div class="operation-container">
      <t-space>
        <t-button theme="primary" type="submit">确定</t-button>
        <t-button theme="default" @click="onCancel">取消</t-button>
      </t-space>
    </div>
  </t-form>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { MessagePlugin, FormRule, SubmitContext } from 'tdesign-vue-next';
import { createContract, updateContract } from '@/api/contract';
import type { ContractInfo } from '@/api/contract';

const props = defineProps<{
  type: 'add' | 'edit';
  formData?: Partial<ContractInfo>;
}>();

const emit = defineEmits(['success', 'cancel']);

const form = ref();
const formData = ref<Partial<ContractInfo>>({});

// 表单验证规则
const rules = {
  index: [{ required: true, message: '请输入序号', trigger: 'blur' }],
  no: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
  name: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
  status: [{ required: true, message: '请输入状态：1-草稿，2-审核中，3-已生效，4-已完成，5-已终止', trigger: 'blur' }],
  paymentType: [{ required: true, message: '请输入付款类型：1-一次性付款，2-分期付款，3-按进度付款', trigger: 'blur' }],
  contractType: [{ required: true, message: '请输入合同类型：1-采购合同，2-销售合同，3-服务合同', trigger: 'blur' }],
  amount: [{ required: true, message: '请输入合同金额', trigger: 'blur' }],
  adminName: [{ required: true, message: '请输入管理员姓名', trigger: 'blur' }],
} as Record<string, FormRule[]>;

watch(
  () => props.formData,
  (val) => {
    if (val) {
      formData.value = { ...val };
    }
  },
  { immediate: true }
);

// 表单提交
const onSubmit = async (ctx: SubmitContext) => {
  if (ctx.validateResult === true) {
    try {
      if (props.type === 'add') {
        await createContract(formData.value as ContractInfo);
        MessagePlugin.success('新增成功');
      } else {
        if (!props.formData?.id) {
          MessagePlugin.error('缺少ID');
          return;
        }
        const updateData = {
          id: props.formData.id,
          ...formData.value
        };
        await updateContract(updateData);
        MessagePlugin.success('更新成功');
      }
      emit('success');
    } catch (error) {
      console.error('提交失败:', error);
      MessagePlugin.error('提交失败');
    }
  }
};

// 取消处理
const onCancel = () => {
  emit('cancel');
};
</script>

<style lang="less" scoped>
.operation-container {
  margin-top: 20px;
  text-align: right;
}
</style> 